<template>
  <div class="cs-menu">
    <div class="side-block">
      <div class="mene-switch" @mousemove="isShowMenu = true">
        <i class="iconfont icon-caiwu"></i>
      </div>
      <div class="side-modular">
        <div :class="{'modular-item':true,'open-modular-item':modular.isShowChild}" v-for="modular in menuData" :key="modular.id">
          <Tooltip :content="modular.title" placement="left">
            <div
              class="modular-icon"
              @click="
                (event) => {
                  showChildMenu(event,modular);
                }
              "
            >
              <i :class="modular.icon"></i>
            </div>
          </Tooltip>
          <div class="modular-box" v-show="modular.isShowChild" :style="{maxHeight:modular.height,overflow:'auto'}">
            <div
              class="child-item"
              v-for="childItem in modular.child"
              :key="childItem.id"
              @click="()=>{openMenuItem(childItem)}"
            >
              <i :class="childItem.icon"></i>
              {{ childItem.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="isShowMenu">
      <div class="menu-box">12321</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cs-menu",
  props: {
    with: { default: "50px" },
    menuData: {}
  },
  data: () => {
    return {
      isShowMenu: false,
      currentOpenMenu:null,
    };
  },
  methods: {
    clickHandFun(e){
      // 侧边菜单
      const contentWrap = document.getElementsByClassName("open-modular-item");
       if (contentWrap[0]) {
          if (!contentWrap[0].contains(e.target)) {
            this.$set(this.currentOpenMenu, "isShowChild", false);
          }
       }
       // 全部菜单
       const allMenuBox = document.getElementsByClassName("menu-box");
       if (allMenuBox[0]) {
          if (!allMenuBox[0].contains(e.target)) {
            this.isShowMenu = false;
          }
       }
    },
    showChildMenu(e,result) {
      if(this.currentOpenMenu){
        this.$set(this.currentOpenMenu, "isShowChild", false);
      }
      this.$set(result, "isShowChild", true);
      try{
        const eventToBottom = window.innerHeight - e.target.getBoundingClientRect().y -e.target.getBoundingClientRect().height;
        this.$set(result, "height", `${eventToBottom}px`);
      }catch(e){
        this.$set(result, "height", '180px');
      }
      this.$set(result, "isShowChild", true);
      // 计算节点离底部的距离
      this.currentOpenMenu = result;
    },
    openMenuItem(result){
      this.$emit("");
    }
  },
  created() {
    // 监听点击事件
    window.addEventListener("click",this.clickHandFun);
  }
};
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
